<template>
    <div class="order">
        <Position :navList="navList"/>
        <div class="title">
            <div class="item">
                <div class="key">选择日期：</div>
                <el-date-picker
                size="mini"
                value-format="yyyy-MM-dd HH:mm:ss"
                v-model="date"
                type="datetimerange"
                :picker-options="pickerOptions"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                align="right">
                </el-date-picker>
            </div>
            <div class="item">
                <div class="key">地址：</div>
                <el-input
                size="mini"
                placeholder="请输入地址"
                v-model="address"
                clearable>
                </el-input>
            </div>
            <div class="item">
                <div class="key">编号：</div>
                <el-input
                size="mini"
                placeholder="请输入编号"
                v-model="machine_code"
                clearable>
                </el-input>
            </div>
            <div class="item btn">
                <el-button type="primary" size="small" @click="search">查询</el-button>
            </div>
        </div>
        <div class="cont">
            <el-table :data="tableData" style="width: 100%" v-loading="loading">
                <el-table-column prop="machine_id" label="自编号"></el-table-column>
                <el-table-column prop="o_machine_code" label="设备"></el-table-column>
                <el-table-column prop="need" label="营业额(元)"></el-table-column>
                <el-table-column prop="machine_address" label="投放地点"></el-table-column>
                <el-table-column prop="machine_scene" label="备注"></el-table-column>
                <el-table-column prop="address" label="运营商">
                    <template>加盟商</template>
                </el-table-column>

            </el-table>
            <div class="btn">
                <el-button type="primary" size="small" @click="downloadExcel">生成Excel</el-button>
            </div>
            <div class="page">
                <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :page-sizes="[10, 50, 100]"
                :page-size="size"
                :current-page='page'
                layout="sizes, prev, pager, next"
                :total="total"></el-pagination>
            </div>
        </div>
    </div>
</template>
<script>
    import Position from '../components/position.vue'
    export default {
        components:{
            Position
        },
        data() {
            return {
                navList:[{
                    name:'收益进账',
                    url:'/order'
                },{
                    name:'营业额查询',
                    url:''
                }],
                loading:false,
                date:'',//日期时间
                address:null,//地址
                machine_code:null,//编号
                tableData:[],
                total:0,//总条目数
                size:10,//当前页面数据数量
                page:1,//页码
                pickerOptions: {
                    shortcuts: [{
                        text: '最近一周',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近一个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近三个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                            picker.$emit('pick', [start, end]);
                        }
                    }]
                },
            };
        },
        mounted(){
            this.getList()
        },
        methods:{
            //获取列表
            async getList(){
                let start = null
                let end = null
                if (this.date) {
                    start = this.date[0]
                    end = this.date[1]
                }
                this.loading = true
                let {data:{code,data}} = await this.$http.get(this.$api.price,{
                    start_at:start,
                    end_at:end,
                    machine_code:this.machine_code,
                    machine_address:this.address,
                    size:this.size,
                    page:this.page
                })
                this.loading = false
                this.tableData = data.items
                this.total = parseInt(data.pages.totalCount)
                console.log('订单列表',data)
            },
            //下载excel
            downloadExcel(){
                console.log('下载excel')
                window.location.href=this.$api.turnoverlistExcel
            },
            //查询
            search(){
                console.log('点击查询')
                this.page = 1
                this.size = 10
                this.getList()
            },
            //页面展示数据数量变化时
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.size = val
                this.page = 1
                this.getList()
            },
            //翻页时
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.page = val
                this.getList()
            }
        }
    };
</script>
<style lang="scss" scoped>
    .order{
        .title{
            
            padding: 15px;
            background-color: #fff;
            margin-bottom: 10px;
            display: flex;
            flex-wrap: wrap;
            .item{
                display: flex;
                ::v-deep .el-input--mini .el-input__inner{
                    height: 32px;
                }
                .el-range-editor--mini.el-input__inner{
                    height: 32px;
                }
                .key{
                    width: 100px;
                    font-size: 14px;
                    line-height: 30px;
                    text-align: center;
                }
            }
            .btn{
                margin-left: 15px;
            }
        }
        .cont{
            padding: 5px;
            width: calc(100% - 10px);
            height: calc(100% - 10px);
            background-color: #fff;
            .btn{
                margin: 10px 0;
                text-align: left;
            }
        }
        
        
    }
    
</style>